The :in-range and :out-of-range pseudo-classes in CSS are used to style form elements based on whether their current value falls within or outside a specified range. These are particularly useful with input types like number, range, date, or time that have min and max attributes.

How They Work

1
:in-range – Selects form elements whose value is within the specified min and max range.
2
:out-of-range – Selects form elements whose value is outside the specified min and max range.
3
These pseudo-classes update dynamically as the user interacts with the form.

Example: Using :in-range and :out-of-range

In this example, when the user enters a value within the range 1–10, the input has a green border and light green background. If the value is outside this range, it gets a red border and light red background, providing immediate visual feedback.

Best Practices

1
Use :in-range and :out-of-range to provide instant feedback for numeric or date inputs.
2
Combine with :required or :optional to enhance form usability.
3
Ensure visual cues like color are distinguishable and accessible.
4
Test across browsers, as support for some input types may vary.

Difficulty: 3/10

Topics: CSS pseudo-classes, form validation styling, user experience feedback

Scenario Questions

0-2 years experience

1
How would you make a number input turn red when the user types a value outside the allowed range, without using JavaScript?
2
What happens if a user enters 'abc' in an input with min='1' and max='100'? Will :out-of-range apply?

2-5 years experience

1
Our form validation UI is broken — the input turns red even when the value is valid. What could be causing :out-of-range to trigger incorrectly?
2
We’re using :in-range to show a subtle green border, but QA says it’s not visible enough on mobile. How would you debug and improve this without breaking accessibility?

5-8 years experience

1
We’re building a global form system that supports date ranges across timezones. How would you handle :in-range/:out-of-range with user-entered dates that might be invalid due to timezone conversion?
2
A legacy form uses text inputs with regex validation — we want to migrate to native HTML5 inputs with min/max. What edge cases in :in-range/:out-of-range behavior might catch us off guard during rollout?

8+ years experience

1
We’re standardizing form styling across 12 product teams. How would you design a CSS architecture that safely leverages :in-range/:out-of-range while avoiding conflicts with custom validation libraries or legacy overrides?
2
Our analytics show users abandon forms when validation feedback is unclear. How would you advocate for a system-wide adoption of these pseudo-classes, and what legacy browser support tradeoffs would you need to negotiate?

Follow-up Questions

❓What happens if you forget to set min/max on the input?
❓How would you style a range input differently from a text input using these pseudo-classes?
❓Do these work with all input types, or just number and date?